<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/css/reset.css">
    <style>
        .body{

            background-color: #BFA;
        }
        
        
        .box{
            /* 字体大小 */
            font-size: 12px;
            
            width: 300px;
            height: 2000px;
            margin: 0 auto;
            background-color: #fff;
            border-top: 1px solid #ddd;
        }
        .biaoti{
            /* 设置高度 */
            height: 30px;
            /* 设置上边框 */
            border-top: 1px rgb(243, 69, 64) solid;
            /* 为了边框的和文字的宽度一致,需要将h2转换为行内块元素 */
            display: inline-block;
            /* 通过margin-top 讲h2上移,盖住上边框 */
            margin-top: -1px;
            
            padding-top: 10px;
        }
        .biaoti a{
            /* 去除下划线 */
            text-decoration: none;
            /* 设置颜色 */
            color: #40406B;
            /* 对字体加粗 */
            font-weight: bold;
            /* 设置文字的加粗 */
        }
        
        
        .hot1{
            background-color: rgb(243, 69, 64); 
            width: 55px;
            height: 40px;
            color: rgb(255, 255, 255);
            font-size: 14px;
            line-height: 40px;
            background-clip: border-box;
            background-attachment: scroll;
            background-image: none;
            background-origin: padding-box;
        }
     
        .hot2 {
           font-size: 16px;
           width: 244px;
           height: 39px;
           line-height: 39px;
           color: rgb(243, 69, 64);
           text-indent: 10px;
           border: 0px 1px 1px 0px;

        }
        .hot3 {
           color:  rgb(64, 64, 64);
           font-size: 16px;
           line-height: auto;
           text-indent: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
            <h2 class="biaoti">
                 <a href="#">新闻专题</a>
            </h2>
        <div class="tupian">
            <a href="JavaScript">
                <img src="https://cms-bucket.ws.126.net/2021/0205/e87fdd44j00qo12ch001nc0008c002ic.jpg?imageView&thumbnail=300y90&type=webp" alt="">
            </a>
        </div>
            <h3 >
                <span class="hot1">HOT</span>
                 <strong class="hot2">
                     <a class="hot3" href="">2021年春节春运</a>
                    </strong>
            </h3>
        <div>
        <ul class="pailie">
            <li class="fenlei">
                <a href="">2020年全国两会</a>
            </li>
            <li class="fenlei">
                <a href="">2020年春运春节</a>
            </li>
            <li class="fenlei">
                <a href="">中国答卷-新中国成立70周年</a>
            </li>
            <li class="fenlei">
                <a href="">海军成立70周年</a>
            </li>
        </ul>
        </div>
    </div>
</body>
</html>